HTML Template for Product Websites

Version 1.0.1

Introduction

The template is a collection of HTML, CSS and Javascript files that can be easily adapted for a website or content management system. The template employs the principles of responsive design and works on both desktop and mobile computers.

Versioning

Releases follow the “major.minor.patch” numbering convention. The templates themselves always link to the most recent version of the resources.

To always use the most recent version:
//shared.bayer.com/products/api/…

To pin to a particular release:
//shared.bayer.com/products/api/10/…

Change Notes

V 1.0.1 2016-01-05

• CSS: Added Webkit prefixes to fix issues on iOS < 9

V 1.0 2015-12-23

• Created

---

HTML

The template uses HTML5 which provides compacter, more expressive semantics.

---

Javascript

Third party libraries

The following external Javascript libraries are required. Please ensure that your own development is compatible with them, and that you apply and verify any security patches.

• JQuery 2.1.4
• JQueryUI 1.11.4
  • jquery.ui.core.js
  • jquery.ui.widget.js
  • jquery.ui.mouse.js
  • jquery.ui.position.js
  • jquery.ui.autocomplete.js
  • jquery.ui.menu.js
• Modernizr 2.7.1
  (enables HTML5 for old IEs with html5shiv and printshiv, feature detection, deferred loading)
• enquire.js v2.1.1
• matchMedia() polyfill

Important global Variables:

• lang (get language from lang-Attribute on html-Tag) [default "en"] {supported "en", "de"}
• availableTags (Array for Search as you Type, in search.js)

JS Feature

• TopNavigation with Megaflyouts (max. 4 Levels) and off canvas navigation for smartphones
• Search as you type (jquery.ui.autocomplete) filled via Array (availableTags in custom.js)
• Share function (only visible on screens > 768px), cutomize in custom.js

Plugins

• hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html) [TopNavigation]
• Lazy Load - jQuery plugin for lazy loading images (http://www.appelsiini.net/projects/lazyload) [Topnavi]
• fix for the iOS orientationchange zoom bug (https://github.com/scottjehl/iOS-Orientationchange-Fix) [General]
• console.log wrapper to avoid errors in browsers lacking console (HTML5 template)

---

Styles/CSS (adaptive layout)

Media Queries

• Desktop view (default)
• Tablet view portrait (768px - 1012px)
• Smartphone view landscape (460px - 767px)
• Smartphone view portrait (> 459px)
• Print view
• Retina Background-Images for HiRes Displays

Image sprites

For reason of performance the template uses the image sprites technique for all standard icons. The images can be found in the "sys" folder inside the "img" folder. The main sprite "sprite.png" is automatically replaced witch "sprite_new_retina.png" for high resolution displays to provide sharp icons.

---

Naming Area

In order for the naming area to work with the responsive design three different files are used:

• naming-area.png (995 x 100 px)
• naming-area.svg
• naming-area-mobile.svg